<wxs src='@/utils/filter.wxs' module='filter'></wxs>
<template>
	<view class="content">
		<topTitle :name="`钱包`" back right class="bg_w"/>
		<view class="money flex j-c-c">
			<view class="box flex f-a-c j-s-b">
				<view class="fl">
					<view class="color-c f12">可提现金额（元）</view>
					<view class="color-f7 f34 mt10">{{filter.price(money,1)}}</view>
				</view>
				<view class="fr">
					<view class="btn color-w" @click="go">提现</view>
				</view>
			</view>
		</view>
		<view class="tit f16">交易明细</view>
		<view class="list">
			<view v-for="(item,index) in list" :key="index" class="flex f-a-c j-s-b item">
				<view class="fl f14">
					<view class="">{{item.memo}}</view>
					<view class="color-9 mt16 f12">{{util.formatDate(item.createtime)}}</view>
				</view>
				<view class="fw f16">
					<view :class="item.inout == 1?'color-65':'color-eb'">
						{{item.inout == 1?'+':'-'}}{{filter.price(item.money,1)}}
					</view>
				</view>
			</view>
		</view>
		<defaultImg :img="`../../static/img/default.png`" :text="`暂无数据`" v-if="list.length<=0"/>
	</view>
</template>

<script>
import defaultImg from '@/components/defaultImg.vue'
export default {
	components:{ defaultImg },
  data() {
    return {
			money: 0,
			page: 1,
			last_page: 1,
			user: wx.getStorageSync('userInfo') || 0,
			list:[]
    }
  },
  onShow() {
		this.getList()
  },
	onReachBottom() {
		if(this.page >= this.last_page){
		  this.util.log('到底拉')
		  return
		}
		this.page ++;
		this.getList();
	},
  methods: {
		getList(){
			this.util.req(this.api.apiWaterList,{}).then(res=>{
				this.list = res.list;
				this.money = res.money;
				this.last_page = res.last_page;
			})
		},
		go(){
			this.util.go('/pages/my/withdraw?money=' + this.money)
		}
  }
}
</script>

<style lang="scss">
	page{
		background: #f5f5f5;
		.money{
			background: linear-gradient(224deg, #EC6C01 21%, #FF8E2F 100%);
			height: 364rpx;
			.box{
				background-image: url('/static/img/wallet.png');
				background-repeat: repeat;
				background-size: cover;
				width: 616rpx;
				height: 288rpx;
				margin-top: 76rpx;
				padding: 0 34rpx;
				.btn{
					min-width: 200rpx;
					text-align: center;
					padding: 20rpx 0;
					background: linear-gradient(96deg, #ECAA01 0%, #EC6C01 100%);
					border-radius: 36rpx;
					line-height: 1;
				}
			}
		}
		.tit{
			margin: 52rpx 32rpx 12rpx;
		}
		.list{
			padding-bottom: 40rpx;
			.item{
				margin: 28rpx 32rpx;
				background: #fff;
				border-radius: 16rpx;
				border: 2rpx solid #eee;
				padding: 40rpx 20rpx;
			}
		}
	}
</style>
